<template>
  <div class="loading-cube">
    <div class="cube-grid">
      <div class="cube cube-1"></div>
      <div class="cube cube-2"></div>
      <div class="cube cube-3"></div>
      <div class="cube cube-4"></div>
      <div class="cube cube-5"></div>
      <div class="cube cube-6"></div>
      <div class="cube cube-7"></div>
      <div class="cube cube-8"></div>
      <div class="cube cube-9"></div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.loading-cube {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .cube-grid {
    width: 1.875rem;
    height: 1.875rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .cube-grid .cube {
    background-color: rgb(var(--v-theme-graydisabled));
    opacity: 0.8;
    -webkit-animation: cube-grid-scale-delay 1.3s infinite ease-in-out;
    animation: cube-grid-scale-delay 1.3s infinite ease-in-out;

    &.cube-3 {
      background: linear-gradient(
        180deg,
        rgb(var(--v-theme-primary-gradient-from)) 0%,
        rgb(var(--v-theme-primary-gradient-to)) 100%
      );
    }
  }

  $cubeParams: (
    1: 0.2s,
    2: 0.3s,
    3: 0.4s,
    4: 0.1s,
    5: 0.2s,
    6: 0.3s,
    7: 0s,
    8: 0.1s,
    9: 0.2s,
  );
  @each $i, $s in $cubeParams {
    .cube-grid .cube-#{$i} {
      animation-delay: $s;
    }
  }

  @keyframes cube-grid-scale-delay {
    0%,
    70%,
    100% {
      -webkit-transform: scale3D(1, 1, 1);
      transform: scale3D(1, 1, 1);
    }
    35% {
      -webkit-transform: scale3D(0, 0, 1);
      transform: scale3D(0, 0, 1);
    }
  }
}
</style>
